<template>
  <div>
    <div class="fuzhuItem" v-for="(item, index) in sortListWrap" :key="index">
      <div class="title-item">
        <p>{{ item.name }}</p>
        <!-- <p @click="recordFun"><span>查看历史记录</span><RightOutlined /></p> -->
      </div>

      <a-table
        class="table"
        :columns="columns"
        :dataSource="item.list"
        size="small"
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex == 'rslt_flg'">
            <span
              :class="['tips', record.rslt_flg == 1 ? 'active' : record.rslt_flg == 0 ? 'on' : '']"
              >{{ record.rslt_flg ? '↑' : '-' }}</span
            >
          </template>
          <!-- <template v-else-if="column.dataIndex == 'pe_itm_nm'">
            <span class="patName" @click="recordFun(record)">{{ record.pe_itm_nm }}</span>
          </template> -->
          <template v-else-if="column.dataIndex == 'pe_itm_nm'">
            <span>{{ record.pe_itm_nm }}</span>
          </template>
        </template>
      </a-table>
    </div>
    <a-modal v-model:open="openPhy" width="70%" :title="title" @ok="handleOk">
      <a-table
        class="table"
        :columns="columnsData"
        :dataSource="ListData"
        size="small"
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <!-- 需要新增字段   向上 向下箭头 -->
          <template v-if="column.dataIndex == 'rsltFlg'">
            <!-- <span :class="['tips', record.rslt_flg ? 'active' : '']">{{
              record.rslt_flg ? record.rslt_flg : '-'
            }}</span> -->
            <span
              :class="['tips', record.rsltFlg == 1 ? 'active' : record.rsltFlg == 0 ? 'on' : '']"
              >{{ record.rsltFlg ? '↑' : '-' }}</span
            >
          </template>
        </template>
      </a-table>
      <div class="changeState" v-if="echartsShow">
        <div class="title">{{ columnChange }}</div>
        <echartsCheck
          :dataListWrap="dataListWrap"
          :titles="echartsCheckTitle"
          class="echartsCheck"
        />
      </div>
      <template v-slot:footer>
        <a-button @click="openPhy = false">关闭</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'
import { RightOutlined } from '@ant-design/icons-vue'
import echartsCheck from './echartsCheck.vue'
import { getRecord } from '@/api/intelligentInspectionReport/index'
const sortListWrap = ref<any>([])
const patInfos = ref<any>({})
const openPhy = ref<boolean>(false)
const title = ref('历史记录')
const echartsShow = ref<boolean>(true)
const echartsCheckTitle = ref('')
const dataListWrap = ref({})
const columnChange = ref('')
const props = defineProps({
  sortList: {
    type: Object, // 或者 Object, 取决于你需要的类型
    required: true
  },
  patInfo: {
    type: Object, // 或者 Object, 取决于你需要的类型
    required: true
  }
})
watch(
  () => props,
  (newValue, oldValue) => {
    nextTick(() => {
      patInfos.value = newValue.patInfo
      sortListWrap.value = newValue.sortList
    })
  },
  {
    immediate: true,
    deep: true
  }
)
const columns = ref<any[]>([
  {
    title: '项目名称',
    dataIndex: 'pe_itm_nm',
    key: 'pe_itm_nm',
    align: 'left'
  },
  {
    title: '结果',
    dataIndex: 'pe_itm_rslt',
    key: 'pe_itm_rslt',
    align: 'left'
  },
  {
    title: '提示',
    dataIndex: 'rslt_flg',
    key: 'rslt_flg',
    align: 'left'
  },
  {
    title: '单位',
    dataIndex: 'rslt_mtg_unt',
    key: 'rslt_mtg_unt',
    align: 'left'
  },
  {
    title: '参考范围',
    dataIndex: 'rfrc_vlu',
    key: 'rfrc_vlu',
    align: 'left'
  }
])
const columnsData = ref<any[]>([
  {
    title: '体检时间',
    dataIndex: 'examDt',
    key: 'examDt',
    align: 'left'
  },
  {
    title: '项目名称',
    dataIndex: 'peItmNm',
    key: 'peItmNm',
    align: 'left'
  },
  {
    title: '结果',
    dataIndex: 'peItmRslt',
    key: 'peItmRslt',
    align: 'left'
  },
  {
    title: '提示',
    dataIndex: 'rsltFlg',
    key: 'rsltFlg',
    align: 'left'
  },
  {
    title: '单位',
    dataIndex: 'rsltMtgUnt',
    key: 'rsltMtgUnt',
    align: 'left'
  },
  {
    title: '参考范围',
    dataIndex: 'rfrcVlu',
    key: 'rfrcVlu',
    align: 'left'
  }
])
const ListData = ref<any>([])
const recordFun = (item) => {
  openPhy.value = true
  columnChange.value = ''
  dataListWrap.value.xAxisData = []
  dataListWrap.value.dataList = []
  getRecord({
    pid: patInfos.value.empi,
    peItmCd: item.pe_itm_cd
  }).then((res) => {
    columnChange.value = item.pe_itm_nm
    if (res.data && res.data.length > 0) {
      ListData.value = res.data
      if (!isNaN(Number(ListData.value[0].peItmRslt))) {
        echartsShow.value = true
      } else {
        echartsShow.value = false
      }
      item.pe_itm_nm = item.pe_itm_nm ? item.pe_itm_nm : ''
      item.rslt_mtg_unt = item.rslt_mtg_unt ? item.rslt_mtg_unt : ''
      echartsCheckTitle.value = item.pe_itm_nm + ',' + item.rslt_mtg_unt
      for (let i = 0; i < res.data.length; i++) {
        ListData.value[i].examDt = timeFilter(res.data[i].examDt, 'date')
        dataListWrap.value.xAxisData.push(timeFilter(res.data[i].examDt, 'date'))
        dataListWrap.value.dataList.push(res.data[i].peItmRslt)
      }
    } else {
      ListData.value = []
      dataListWrap.value = {}
      echartsCheckTitle.value = ''
    }
  })
}
const timeFilter = (date, dateed) => {
  let d = '',
    m = '',
    day = '',
    datetime = '',
    h = '',
    min = '',
    s = ''
  // dateFormat;
  // dateFormat = date.replace(/\-/g, '/')
  // dateFormat = date.replace(/\//g, '-')
  // d = new Date(dateFormat)
  // console.log(1111222);
  // console.log(date);

  d = new Date(date)
  m = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
  day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
  h = d.getHours() < 10 ? '0' + d.getHours() : d.getHours()
  min = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()
  s = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds()
  if (dateed == 'date') {
    datetime = d.getFullYear() + '-' + m + '-' + day
    return datetime
  } else if (dateed == 'minutes') {
    datetime = d.getFullYear() + '-' + m + '-' + day + ' ' + h + ':' + min
    return datetime
  } else if (dateed == 'minutesdd') {
    datetime = d.getFullYear() + '/' + m + '/' + day + ' ' + h + ':' + min
    return datetime
  } else if (dateed == 'minutesTwo') {
    datetime = h + ':' + min
    return datetime
  } else {
    datetime = d.getFullYear() + '-' + m + '-' + day + ' ' + h + ':' + min + ':' + s
    return datetime
  }
}

const handleOk = (e: MouseEvent) => {
  openPhy.value = false
}
</script>
<style lang="less" scoped>
.fuzhuItem {
  margin-top: 16px;

  &:nth-child(1) {
    margin-top: 0;
  }
}

.changeState {
  .title {
    padding: 8px 16px;
    margin-top: 24px;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #1d2129;
    background: #f7f8fa;
  }

  .echartsCheck {
    width: 100%;
    height: 300px;
  }
}

.table {
  margin-top: 12px;

  .tips {
    display: inline-block;

    &.on {
      color: #f53f3f;
      transform: rotate(180deg);
    }

    &.active {
      color: #f53f3f;
    }
  }
}

::v-deep(.table) {
  margin-top: 12px;

  .tips {
    display: inline-block;

    &.on {
      color: #f53f3f;
      transform: rotate(180deg);
    }

    &.active {
      color: #f53f3f;
    }
  }

  .patName {
    color: #1677ff;

    &:hover {
      cursor: pointer;
      opacity: 0.8;
    }
  }
}

.title-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  margin: 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
  background: #f7f8fa;

  p {
    margin: 0;
    font-size: 14px;

    &:nth-child(2) {
      color: #165dff;

      &:hover {
        cursor: pointer;
        opacity: 0.8;
      }
    }
  }
}

.title-item:first-child {
  margin-top: 0;
}

.result-content {
  padding: 12px;
  background: #f7f8fa;
}
</style>
